<template>
	<view class="shares">
		<view class="f f_top_back">
			<i class="iconfont iconzu4004" @click="$navBack()"></i>
		</view>


		<view class="share_yq">
			<view class="share_head bold">我的邀请</view>
			<view class="main_sahre f f_column f_align_center">
				<view class="f f_align team_line_warp">
					<view class="f f_column f_align f_align_center team_item">
						<text class="bold">直推人数</text>
						<text class="bold number">{{userInfo.directCount}}</text>
					</view>
					<view class="f f_column f_align f_align_center team_item">
						<text class="bold">团队人数</text>
						<text class="bold number">{{userInfo.totalSubordinate}}</text>
					</view>
				</view>
				<view class="yq_btn bold" @click="OnShares">
					发送邀请海报
					<view class="r_btn_ico">
						<image src="/static/share/r@2x.png" class="autoImg" mode=""></image>
					</view>
				</view>
				<view class="s_w_team bold" @click="$navTo('../myTeam/myTeam')">查看我的团队 <i class="iconfont iconzu5536"></i></view>
			</view>
			<view class="share_head bold">推广文案</view>
			<view class="main_sahre f f_column">
				<view class="r_m_title bold f f_align_center">
					<view class="t_m_p_text">
						邀请文案
					</view>
					<view class="r_m_bg_text bold">01</view>
				</view>
				<view class="r_m_text">
					帮创传媒是帮助大众轻松创业的资讯传媒平台！邀请好友注册均可以每天免费参与平台抽奖抽取百万大奖！
				</view>
				<view class="r_m_link">
                  链接：
				</view>
				<view class="r_m_text">
					https://www.baidu.com
				</view>
				<view class="r_m_btn">
					点击复制
				</view>
			</view>
			<view class="main_sahre alone">
				<view class="ruler_title bold">
					活动规则
				</view>
				<view class="r_text">
					所有平台新注册的用户奖励一张奖卷， 用户邀请一个好友免费注册即可以获得平台奖励的奖卷一张，平台还会根据用户团队小市场的用户增长奖励用户1：1的奖卷，用户还可以获得直接邀请用户所有提现收益的20%的奖励，包含任务收益，竞价收益，中奖收益等！ 全网投票选取的优质创业平台植入原有团队网体，用户团队一次建立，多平台永久多项收益！具体活动细则，可咨询推荐导师！
				</view>
			</view>
		</view>

		<view class="qrimg" v-if="val != ''">
			<tki-qrcode
				cid="qrcode1" ref="qrcode"
				:val="val" :size="200" unit="upx"
				background="#fff"
				foreground="#000"
				pdground="#000"
				:onval="false"
				:loadMake="true"
				:usingComponents="true"
				:show="false"
				@result="qrCodeSuceess"
			/>
		</view>
		<canvas class="canvasMain" canvas-id="ShareCanvas"></canvas>


		<toast :visible.sync="visibleShow" :showClose="false">
			<view class="toast_show" slot="content">
				<view class="share_banner">
					<image :src="newShareSrc" class="autoImg" mode=""></image>
				</view>
				<view  class="btn_handler f f_column f_align_center">
					<text class="t_tit">分享到</text>
					<view class="f f_align f_align_center" style="width: 100%;margin-bottom: 20rpx;">
						<view class="f f_column f_align_center share_c_m" @click="$copy(val)">
							<i class="iconfont iconzu5674"></i>
							<text>复制链接</text>
						</view>
						<view class="f f_column f_align_center share_c_m" @click="screenImageShare">
							<i class="iconfont iconzu5673"></i>
							<text>保存图片</text>
						</view>
					</view>
					<view class="t_toast_cancel" @click="visibleShow = false">取消</view>
				</view>
			</view>
		</toast>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				visibleShow:false,
				userInfo:{
					directCount:0,
					totalSubordinate:0
				},
				isShare:true,

				val:'https://www.baidu.com',
				newShareSrc:''
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods:{
			//获取用户信息哦
			async getUserInfo(){
				const _this = this;
				let res = (await _this.$http('/api/auth/user/getUserInfo','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let userInfo = res.data;
					_this.userInfo = userInfo;
					uni.setStorageSync('userInfo',userInfo);
				}
			},
			//二维码生成成功后
			qrCodeSuceess(path){
				const _this = this;
				_this.canvasCreated(path);
			},
			async canvasCreated(path){
				const _this =this;
				uni.showNavigationBarLoading();
				var ctx = uni.createCanvasContext('ShareCanvas', this);
				ctx.drawImage('/static/share/share01@2x.png',0,0,_this.$sys().screenWidth,_this.$sys().screenWidth*1200/750);
				ctx.drawImage(path,uni.upx2px(580),uni.upx2px(1060),60,60);
				ctx.draw(false,function(){
					setTimeout(()=>{
						///生成图片并保存
						uni.canvasToTempFilePath({
							canvasId:'ShareCanvas',
							success:function(res){
								uni.hideNavigationBarLoading();
								_this.newShareSrc = res.tempFilePath;
							},
							fail: (e) => {
								uni.hideNavigationBarLoading();
								uni.showToast({
									title:'生成失败，截图分享',
									duration:2000,
									icon:'none'
								})
							}
						})
					},100)
				});
			},
			screenImageShare(){
				const _this = this;
				uni.showLoading({
					title:'保存图片中...'
				})
				uni.saveImageToPhotosAlbum({
					filePath:_this.newShareSrc,
					success(res) {
						uni.hideLoading();
						_this.$showToast('保存到本地成功～')
					}
				})
			},
			OnShares(){
				this.visibleShow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shares{
		box-sizing: border-box;
		width: 100%;
		min-height: 200vh;
		padding:24rpx 32rpx;
		background: url('/static/share/share@2x.png') no-repeat top center;
		background-size: cover;
		.canvasMain{
			position: absolute;
			width: 750rpx;
			height: 1220rpx;
			left: -10000rpx;
		}
		.toast_show{
			width: 100%;height: 100%;
			@include flex_center;
			.share_banner{
				width: 620rpx;
				height: 1100rpx;
				position: relative;
				z-index: 100;
				margin-top: -200rpx;
				&.full{
					width: 100%;
					height: 100%;
					margin-top: 0;
				}
			}
			.t_toast_cancel{
				width: 100%;
				font-size: 32rpx;
				color: #A3A6AB;
				padding: 24rpx 0;
				border-top: solid 8rpx #F5F5F5;
				text-align: center;
			}
			.btn_handler{
				border-radius: 20rpx 20rpx 0 0;
				background-color: #fff;
				position: absolute;
				bottom: 0;
				left: 0;right: 0;
				z-index:10;
				.t_tit{
					padding: 20rpx 0;
					font-size: 24rpx;
					color: #101010;
				}
				.share_c_m{
					width: 50%;
					font-size: 24rpx;
					color: #111A2B;
					@include flex_center;
					.iconfont{
						font-size: 96rpx;
						margin-bottom: 8rpx;
					}
				}
			}
		}


		.f_top_back{
			padding: var(--status-bar-height) 0 24rpx;
			position: sticky;
			top:0;
			.iconzu4004{color: #fff;font-size: 40rpx;}
		}
		.share_yq{
			width: 100%;
			margin-top: 842rpx;
		}
		.share_head{
			width: 100%;
			height: 110rpx;
			background: url('/static/share/top@2x.png') no-repeat center;
			background-size:100% 100%;
			@include flex_center;
			font-size: 40rpx;
			color: #DF2300;
			margin-top: 32rpx;
		}
		.main_sahre{
			padding: 40rpx;
			border-radius: 0 0 8rpx 8rpx;
			background-color: #fff;
			.team_line_warp{
				width: 496rpx;
				.team_item{
					width: 50%;
					font-size: 36rpx;
					color: #24303C;
					&:first-child{
						border-right: solid 1rpx #D5DADE;
					}
					.number{
						font-size: 60rpx;
						color: #DF2300;
						margin-top: 24rpx;
					}
				}
			}
			.yq_btn{
				width: 550rpx;height: 120rpx;
				border-radius: 60rpx;
				font-size: 44rpx;
				color: #fff;
				@include flex_center;
				background-image: linear-gradient(#FB7552,#EC3A0A);
				box-shadow: 0 10rpx 30rpx #EC3B0C;
				margin:100rpx auto 40rpx;
				.r_btn_ico{
					width: 48rpx;
					height: 48rpx;
					margin-left: 27rpx;
				}
			}
			.s_w_team{
				color: #24303C;
				.iconfont{color: #24303C;font-size: 24rpx;}
			}
			.r_m_title{
				margin-bottom: 24rpx;
				position: relative;
				height: 50rpx;
				.t_m_p_text{
					font-size: 36rpx;
					color: #2B3652;
					position: absolute;
					left: 0;
					z-index: 11;
				}
				.r_m_bg_text{
					font-size: 64rpx;
					color: #DFE6F8;
					position: absolute;
					left: 0;bottom: 0rpx;
					z-index: 1;
				}
			}
			.r_m_link{
				color: #E74014;
				margin-top: 24rpx;
			}
			.r_m_text{
				color: #757D90;
			}
			.r_m_btn{
				@include flex_center;
				margin-top: 12rpx;
				width: 120rpx;
				height: 53rpx;
				font-size: 24rpx;
				color: #fff;
				background-color: $ych_color;
				border-radius: 8rpx;
				margin-bottom: 50rpx;
			}
			&.alone{
				margin-top: 40rpx;
				border-radius: 8rpx;
			}
			.ruler_title{
				font-size: 40rpx;
				color: #253652;
				@include flex_center;
				&::before{
					content: '';
					display: inline-block;
					width: 19.8rpx;height: 19.8rpx;
					background-color: #AAB0BC;
					margin-right: 19rpx;
					transform: rotateZ(45deg);
				}
				&::after{
					content: '';
					display: inline-block;
					width: 19.8rpx;height: 19.8rpx;
					background-color: #AAB0BC;
					margin-left: 19rpx;
					transform: rotateZ(45deg);
				}
			}
			.r_text{
				color: #24303C;
				margin-top: 40rpx;
			}
		}
	}
</style>
